<template>
  <!-- 英雄区域 -->
  <section class="hero-section relative text-white py-24 md:py-32">
    <div class="absolute inset-0 bg-black opacity-30"></div>

    
    <!-- 退出登录按钮 -->
    <!-- <button @click="handleLogout" class="logout-btn"> -->
        <!-- <svg class="w-4 h-4 group-hover:rotate-12 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013 3v1"/>
        </svg> -->
        <!-- <span class="text-sm font-medium">退出登录</span>
      </button> -->

    
    <!-- 装饰性背景元素 -->
    <div class="absolute inset-0 overflow-hidden">
      <div class="absolute -top-40 -right-40 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse" style="animation-delay: 1s;"></div>
    </div>
    
    <div class="relative max-w-7xl mx-auto px-6 text-center">
      <h1 class="text-5xl md:text-7xl font-bold mb-8 animate-fade-in-up">
        发现你的下一部电影
        <span class="bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 bg-clip-text text-transparent block mt-2">
          最爱电影
        </span>
      </h1>
      <p class="text-xl md:text-2xl mb-12 text-blue-100 max-w-4xl mx-auto leading-relaxed animate-fade-in-up" style="animation-delay: 0.2s;">
        基于先进的AI智能推荐算法，深度学习你的观影偏好，为你精准匹配个性化电影推荐，开启无限精彩的电影探索之旅
      </p>

      
      <!-- 统计数据 -->
      <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 animate-fade-in-up" style="animation-delay: 0.6s;">
        <div class="text-center">
          <div class="text-3xl md:text-4xl font-bold text-yellow-400 mb-2">10,000+</div>
          <div class="text-blue-200">精选电影</div>
        </div>
        <div class="text-center">
          <div class="text-3xl md:text-4xl font-bold text-green-400 mb-2">50,000+</div>
          <div class="text-blue-200">活跃用户</div>
        </div>
        <div class="text-center">
          <div class="text-3xl md:text-4xl font-bold text-purple-400 mb-2">95%</div>
          <div class="text-blue-200">推荐准确率</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
function handleLogout() {
  try {
    // 清除本地存储的用户信息
    localStorage.removeItem('token')
    localStorage.removeItem('user')
    localStorage.removeItem('userInfo')
    
    // 清除会话存储
    sessionStorage.clear()
    
    // 直接刷新页面到登录页面
    window.location.href = '/login'
  } catch (error) {
    console.error('退出登录时发生错误:', error)
    // 如果出错，仍然尝试跳转到登录页
    window.location.href = '/login'
  }
}
</script>


<style scoped>
.logout-btn {
  padding: 12px 20px;
  margin-left: 1610px;
  background: rgba(239, 68, 68, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}
</style>